<template>
  <!-- 1280 //  630 -->
  <div id="home" ref="home" class="home">
    <caller-notify ref="callerNotify" />
    <div :class="showHeader ? 'homeBody':'homeBodyAll'">
      <Nav
        :key="navKey"
        v-if="showMenu"
        :showMenu.sync="showMenu"
        @handleShowMenuRoute="handleShowMenuRoute"
      />
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
      <!-- <router-view /> -->
    </div>
    <!-- 悬浮菜单按钮 -->
    <!-- <menu-but @handleShowMenu="handleShowMenu" /> -->
  </div>
</template>

<script>
import { parseTime2DateStr, selectDictLabel } from '@/utils/microsys'
import CallerNotify from '@/components/CallerNotify'
import Nav from './Nav'
import MenuBut from '@/components/MenuBut'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'home',
  data() {
    return {
      showMenu: true,
      drawer: true,
      showHeader: true,
    }
  },
  components: {
    Nav,
    CallerNotify,
    MenuBut,
  },
  computed: mapState({
    navKey: (state) => state.cache.navKey,
  }),
  methods: {
    ...mapActions(['InitCache']),
    //菜单展示
    handleShowMenu(type) {
      let _this = this
      if (type == 'close') {
        this.showMenu = false
      } else {
        this.showMenu = !this.showMenu
      }
      //定时10秒关闭菜单
      if (this.showMenu) {
        setTimeout(() => {
          let screenWidth = document.body.clientWidth
          if (screenWidth < 1444) {
            _this.showMenu = false
            console.log('定时关闭菜单')
          }
        }, 10000)
      }
    },
    //路由跳转
    handleShowMenuRoute() {
      if (document.documentElement.clientWidth < 1444) {
        this.showMenu = !this.showMenu
      }
    },
    //全屏
    fullScreen(element) {
      const isFull = this.checkFull()
      if (isFull) {
        this.exitFullscreen()
      } else {
        this.requestFullscreen()
      }
    },
    //打开全屏
    requestFullscreen() {
      let element = element || document.documentElement
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
      }
    },
    //关闭全屏
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      }
    },
    /**
     * 是否全屏并按键ESC键的方法
     */
    checkFull() {
      var isFull = document.webkitIsFullScreen
      // to fix : false || undefined == undefined
      if (isFull === undefined) {
        isFull = false
      }
      return isFull
    },
    //判断是否展示菜单和header
    handleShowNavAndHeader() {
      const menuList = JSON.parse(sessionStorage.getItem('menuList'))
      if (menuList == null || menuList == '') {
        this.showMenu = false
        this.showHeader = false
        return
      }
    },
    /*
     **提示框
     */
    handleCreateNotification(data) {
      switch (data.type) {
        case 'warning':
          break
        default:
          break
      }
    },
    /*
     **创建弹出提示框
     *@param type  success/warning/info/error
     *@param message  VNode const h = this.$createElement
     *@param duration 显示时间, 毫秒。设为 0 则不会自动关闭
     */
    createNotification(type, message, duration) {
      let notify = this.$notify({
        title: '提示',
        showClose: true,
        type: type,
        dangerouslyUseHTMLString: true,
        message: message,
        duration: duration,
      })
    },
    //创建告警提示框(打开摄像头)
    handleCreatWarningOpenvideoNotification(data) {
      const h = this.$createElement
      let notify = this.$notify({
        title: '告警',
        showClose: true,
        type: 'warning',
        dangerouslyUseHTMLString: true,
        message: h('div', {}, [
          h(
            'p',
            `接收到设备(${data.equipment.equipmentName})的告警信息，是否打开摄像头查看`
          ),
          h(
            'el-button',
            {
              style: {
                float: 'right',
              },
              attrs: {
                size: 'small',
                type: 'primary',
              },
              on: {
                click: () => this.clickBtn(notify, data),
              },
            },
            '打开'
          ),
        ]),
        duration: 0,
      })
    },
    //
    clickBtn(notify, data) {
      let videoId = data.videoId
      notify.close()
      const path = this.$route.path
      if (path === '/gis') {
        let videoIds = videoId.split(',')
        window.playBindingVideo(videoIds)
      } else {
        this.$router
          .push({ name: 'gis', params: { videoId } })
          .catch((err) => {})
        window.handleCheckNav('/gis')
      }
    },
    //新的告警出现
    handleCreatWarningNotification(data) {
      const h = this.$createElement
      let notify = this.$notify({
        title: '告警',
        showClose: true,
        type: 'warning',
        dangerouslyUseHTMLString: true,
        message: h('div', {}, [
          h('p', `设备(${data.equipmentName})上传了一条告警信息,请及时查看`),
          h(
            'el-button',
            {
              style: {
                float: 'right',
              },
              attrs: {
                size: 'small',
                type: 'primary',
              },
              on: {
                click: () => this.clickNewWarningBtn(notify, data),
              },
            },
            '查看'
          ),
        ]),
        duration: 0,
      })
    },
    clickNewWarningBtn(notify, data) {
      notify.close()
      this.$router.push({ name: 'gis' }).catch((err) => {})
      window.handleCheckNav('/gis')
    },
    //创建短信提示框
    handleCreatSmsNotification(data) {
      const h = this.$createElement
      let notify = this.$notify({
        title: '提示',
        showClose: true,
        type: 'success',
        dangerouslyUseHTMLString: true,
        message: h('div', {}, [
          h('p', '您有一条新的短信,请注意查收'),
          h(
            'el-button',
            {
              style: {
                float: 'right',
              },
              attrs: {
                size: 'small',
                type: 'primary',
              },
              on: {
                click: () => this.clickSmsBtn(notify),
              },
            },
            '查看'
          ),
        ]),
        duration: 0,
      })
    },
    clickSmsBtn(notify) {
      notify.close()
      this.$router.push({ name: 'sms' }).catch((err) => {})
      //重新定位当前菜单
      window.handleCheckNav('/sms')
    },
    //创建事件上报提示框
    handleCreatEventNotification(obj, eventTypeOptions) {
      const h = this.$createElement
      let notify = this.$notify({
        title: '提示',
        showClose: true,
        type: 'warning',
        dangerouslyUseHTMLString: true,
        message: h('div', {}, [
          h(
            'p',
            `${parseTime2DateStr(
              new Date(obj.createTime)
            )}发生一起${selectDictLabel(
              eventTypeOptions,
              obj.eventType
            )}告警事件(${obj.eventName}),请及时处理`
          ),
          h(
            'el-button',
            {
              style: {
                float: 'right',
              },
              attrs: {
                size: 'small',
                type: 'primary',
              },
              on: {
                click: () => this.clickEventBtn(notify),
              },
            },
            '查看'
          ),
        ]),
        duration: 0,
      })
    },
    clickEventBtn(notify) {
      notify.close()
      this.$router.push({ name: 'gis' }).catch((err) => {})
      //重新定位当前菜单
      window.handleCheckNav('/gis')
    },
  },
  mounted() {
    this.handleShowNavAndHeader()
    window['requestFullscreen'] = (res) => {
      this.requestFullscreen.call(this, res)
    }
    window['fullScreen'] = (res) => {
      this.fullScreen.call(this, res)
    }
    window['handleCreatWarningNotification'] = (res) => {
      this.handleCreatWarningNotification.call(this, res)
    }
    window['handleCreatWarningOpenvideoNotification'] = (res) => {
      this.handleCreatWarningOpenvideoNotification.call(this, res)
    }
    window['handleCreatSmsNotification'] = (res) => {
      this.handleCreatSmsNotification.call(this, res)
    }
    window['handleCreatEventNotification'] = (res, eventTypeOptions) => {
      this.handleCreatEventNotification.call(this, res, eventTypeOptions)
    }
    //监听窗口大小变化，
    window.onresize = () => {
      return (() => {
        const loginType = sessionStorage.getItem('loginType')
        if (loginType == 'idispatch') {
          return
        }
        let screenWidth = document.body.clientWidth
        if (screenWidth > 1444) {
          this.showMenu = true
        }
      })()
    }
  },

  created() {
    if (sessionStorage.getItem('tokenSign')) this.InitCache()
  },
}
</script>

<style lang="scss" scope>
.home {
  height: 100%;
  display: flex;
  .homeBody {
    display: flex;
    width: 100%;
    height: calc(100%);
  }
  .homeBodyAll {
    display: flex;
    width: 100%;
    height: 100%;
  }
  .el-notification__group {
    width: 100% !important;
  }
  @media screen and (max-width: 1024px) {
    .homeBody {
      height: calc(100% - 45px);
    }
    .homeBodyAll {
      height: 100%;
    }
  }
}
</style>
